<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_608853_ykjxktkf2agojemi.css">

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="/static/mui/css/mui.min1.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <style>
        .headTitle {
            position: fixed;
            border: 1px solid #f4f4f4;
            border-top: none;
            border-left: none;
            border-right: none;
            background: #fff;
            width: 100%;
            height: 44px;
            line-height: 44px;
        }
        .head {
            position: absolute;
            width: 100%;
            max-width: 640px;
            right: 0;
            margin: 0 auto;
            height:44px;
            background: rgb(255, 255, 255);
            top: 0;
            left: 0;
            z-index: 3;
        }
        .head .title1 {
            text-align: center;
            font-size: 17px;
            margin: 0 8%;
            font-style: normal;
            font-weight: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 100%;


        }
        .head a img {
            float: left;
            display: block;
            width: 100%;
            width: 10px;
            height: 16px;
            margin-left: 5%;
            margin-top: 14px;
        }
        .sousuo{
            position: absolute;top:0px;right:4%;color: black
        }
        .list_word {
            color: grey;
            font-size: 13px;
        }

        .list_word1 {
            color: grey;
            font-size: 13px;
        }

    </style>
</head>
<body ontouchstart>
<!--头部-->
<header class="head headTitle" style="   position :fixed;  top:0;text-align: center;border: 0px">
    <a class="back" href="{:url('/home/shouye/shouye')}"><img src="/static/images/back_gray.png" alt="返回"></a>
    <span style="margin-right: 8%">商品管理</span>
    <a class="sousuo" href="{:url('/home/goods/add')}" style="color: black;top:1px;">
        <span class="sp sp-add" style="color: gray;font-size: 28px;line-height: 28px"></span></a>
</header>
<div id="app">
    <div class="result" style="margin-top: 50px;position: absolute;overflow: auto;width: 100%;height: 100%">
    <div  v-for="(item,index) in items"  style="height: 140px;clear: both;background: #ffffff;">
        <div style="height: 100px;border-bottom: 0.01rem solid #f4f4f4;" >
            <a style="color: black" >
                <div style="width:35%;float: left;">
                    <img v-if="item.thumb=='null'" style="width: 90%;height: 90px;padding: 5px" src="/res/img/thumb.png">
                    <img v-else style="width: 90%;height: 90px;padding: 5px" :src="item.thumb">
                </div>
                <div style="width: 45%;float: left;padding: 5px;">
                    <div class="mui-row" style="margin-top: 5px">
                        <div class="mui-col-xs-12 " style="font-size: 15px;line-height: 15px">{{item.name}}</div>
                        <div class="mui-col-xs-4 list_word" style="margin-top: 3px">型号：</div>
                        <div class="mui-col-xs-8 list_word1" style="margin-top: 3px">{{item.xinghao}}</div>
                        <div class="mui-col-xs-4 list_word">品牌：</div>
                        <div class="mui-col-xs-8 list_word1">{{item.pinpai.pinpai}}</div>
                        <div class="mui-col-xs-4 list_word">材质：</div>
                        <div class="mui-col-xs-8 list_word1">{{item.caizhi}}</div>
                    </div>
                </div>
            </a>
            <div id="s" style="width: 15%;float: left;position: relative">
                <span v-if="item.status==1" style="position: absolute;top: 5px;color:#fe8200 ;font-size: 13px;right: 5px"  :data_id="item.id">上架</span>
                <span v-if="item.status==0"  style="position: absolute;top: 5px;background-color: grey;color:white ;font-size: 13px;right: 5px":data_id="item.id">下架</span>
            </div>
        </div>
        <div style="height: 40px;line-height: 40px;margin-top: 5px">
            <a  style="float: right;margin-right: 10px"><button :data_id="item.id" :data_index="index" onclick="del(this)">删除</button></a>
            <a  style="float: right;margin-right: 10px;"> <button  style="width: 80px" onclick="edit(this)" :data_id="item.id">编辑</button></a>
        </div>
    </div>
            <!--滚动加载-->
            <div class="weui-loadmore" v-if="is_loading" style="padding-bottom:30px;height:20px;">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>

            <div class="weui-cells__title" v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据</div>
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            //初始化
            items: [],
            is_loading: false,
            is_none: false,
            cur_page: 1,
            limit: 10,
            status:"",
        },
    });

    //滚动加载更多
    $(function () {
        //进入加载页面
        loadlist();
    });
    $('.result').infinite().on('infinite', function () {
        console.log("加载");
        loadlist();
    });
    //ajax加载数据
    function loadlist() {

        if (!app.is_loading && app.is_none != true) {
            app.is_loading = true;
            $.post('management', {page: app.cur_page, limit: app.limit}, function (res) {
                console.log(res);
                app.is_loading = false;
                if (res.count > 0) {
                    $('.result').show();
                    app.cur_page++;
                    for(var index in res.data){
                        app.items.push(res.data[index]);
                    }
//                app.items=res.data;
                } else {
                    app.is_none = true;
                }
            });
        }

    }
   // 编辑
    function edit(that) {
        var id=$(that).attr('data_id');
        console.log(id);
        var s="edit/id/"+id;
        location.href=s;
    }
    // 删除
    function del(that) {
        var data_id = $(that).attr('data_id');
        var data_index= $(that).attr('data_index');
        console.log(data_index);
        $.post('{:url("/home/goods/del")}',{id:data_id},
            function (res) {
            if(res.code==1){
                app.items.splice(data_index,1);
                // window.location.href = window.location.href;
            }
        });
    }

</script>
</body>
</html>
